<!-- 文章卡片 -->
<script setup>
import { ref, defineProps } from "vue";
import { useRouter } from "vue-router";
const props = defineProps({
  author: {
    type: Number,
    required: true,
  },
  articleList: {
    type: Array,
    default: () => [],
  },
});

const router = useRouter();
// 在此处设计携带aid跳转
const jumpDetailsPage = (aid) => {
  console.log("跳转");
  if (props.author == 1) {
    router.push({
      path: "/article/auart",
      query: {
        aid: aid,
      },
    });
  } else {
    router.push({
      path: "/article",
      query: {
        aid: aid,
      },
    });
  }
};
</script>

<template>
  <div
    class="body"
    v-for="article in articleList"
    @click="jumpDetailsPage(article.aid)"
  >
    <!-- 第一栏 包含用户 时间 标签 -->
    <el-row class="row">
      <el-col :span="4">
        <img
          :src="article.uavator"
          style="height: 30px; border-radius: 50%; margin-right: 15px"
        />{{ article.author }}
      </el-col>
      <el-col :span="8">
        <el-text>{{ article.updateTime }}</el-text>
      </el-col>
      <el-col :span="12">
        
      </el-col>
    </el-row>
    <div style="height: 10px"></div>
    <!-- 第二栏 卡片 -->
    <el-card class="box-card">
      <!-- 卡片头 -->
      <el-row>
        <el-col>
          <div>
            <el-text class="title">{{ article.title }}</el-text>
          </div>
          <div style="margin-top: 10px">
            <el-text class="text">
            <span class="line-clamp">{{ article.description }}</span>
          </el-text>
          </div>
          <div style="height: 15px"></div>
        </el-col>
      </el-row>
      <div class="icon-container">
        <div class="icon">
          <i class="iconfont icon-browse"></i>{{ article.pageView }}
        </div>
        <div class="icon">
          <div class="icon"><i class="iconfont icon-pinglun"></i>评论</div>
        </div>
        <div class="icon">
          <i class="iconfont icon-dianzan"></i>{{ article.likeCount }}
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.body {
  margin-top: 10px;
  margin-bottom: 5px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 14px;
  font-weight: bolder;
}

.text {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.line-clamp {
  line-height: 1.5; 
  max-height: 3.75em; 
}
/* .tag {
  margin-right: 5px;
} */

.icon {
  font-size: 13px;
}

.box-card {
  width: 100%;
  margin-left: 0%;
  border-radius: 6px;
}

.icon-container {
  display: grid; /* 使用Grid布局 */
  grid-template-columns: repeat(3, 1fr); /* 定义3列，每列占据相同的空间 */
  text-align: center;
}
</style>
